<template>
  <CategorySelector></CategorySelector>
  <div>
    <SkuForm
      v-if="count == 3"
      @changeValue="getCountValue"
      :SpuInfo="currentSpuInfo"
    ></SkuForm>
    <SpuForm
      v-else-if="count == 2"
      @changeValue="getCountValue"
      :SpuInfo="currentSpuInfo"
    ></SpuForm>
    <SpuList
      v-else-if="count == 1"
      @changeValue="getCountValue"
      @getSpuInfo="saveSpuInfo"
    ></SpuList>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
export default {};
</script>

<script lang="ts" setup>
import CategorySelector from "@/components/CategorySelector/index.vue";
import SkuForm from "./components/SkuForm.vue";
import SpuForm from "./components/SpuForm.vue";
import SpuList from "./components/SpuList.vue";

// 实现组件切换
const count = ref<number>(1);
//
const currentSpuInfo = ref([]);

// 定义事件接收count
const getCountValue = (val: number) => {
  count.value = val;
};

// 实现数据回显
const saveSpuInfo = (spuInfo) => {
  // console.log("spuList 穿回来的row", spuInfo);
  currentSpuInfo.value = {
    ...spuInfo,
    spuImageList: [], // 为了避免报错 需要添加上这两个属性
    spuSaleAttrList: [],
  };
};
</script>
<style></style>
